<script setup lang="ts">
import type { BannerResult } from '#/api/cms';

import { onMounted, ref } from 'vue';

import { ElImage } from 'element-plus';
import { Autoplay, Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';

import { getBanner } from '#/api/cms';

import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

defineOptions({ name: 'BannerArea' });

const swiperModules = [Pagination, Autoplay];

const bannerSlides = ref<BannerResult[]>([]);

onMounted(async () => {
  bannerSlides.value = await getBanner();
});
</script>

<template>
  <div class="banner-wrapper">
    <Swiper
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :modules="swiperModules"
      :pagination="{
        clickable: true,
        bulletClass: 'swiper-pagination-bullet !bg-white !opacity-60',
        bulletActiveClass:
          'swiper-pagination-bullet-active !bg-white !opacity-100',
      }"
      class="banner-swiper"
    >
      <SwiperSlide v-for="(slide, index) in bannerSlides" :key="index">
        <div class="slide-container">
          <ElImage
            :alt="slide.title"
            :src="slide.imageUrl"
            class="slide-image"
            fit="cover"
          />
          <div class="slide-content">
            <div class="content-wrapper">
              <h2 class="slide-title">
                {{ slide.title }}
              </h2>
              <p class="slide-description">{{ slide.description }}</p>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<style scoped>
.banner-wrapper {
  @apply relative h-screen overflow-hidden; /* 设置高度为视口高度 */
}

.banner-swiper {
  @apply h-full;
}

.slide-container {
  @apply relative h-full;
}

.slide-image {
  @apply h-full w-full object-cover;
}

.slide-content {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent pb-16 pt-32;
}

.content-wrapper {
  @apply container mx-auto px-4;
}

.slide-title {
  @apply mb-3 text-4xl font-bold text-white;
}

.slide-description {
  @apply text-lg text-white/90;
}

:deep(.swiper-pagination-bullet) {
  width: 12px;
  height: 12px;
  margin: 0 8px !important;
}
</style>
